<template>
  <div class="table-container">
    <!--    <el-form :inline="true" :model="formInline" class="form-inline">
          <el-form-item label="审批人">
            <el-input v-model="formInline.user" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>-->
    <el-table ref="filterTableRef" class="table-list" row-key="date"
              :data="tableData.filter((data) => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
              style="width: 100%">

      <el-table-column prop="username" label="姓名" width="180"></el-table-column>
      <el-table-column prop="email" label="email"></el-table-column>
      <el-table-column label="角色">
        <template #default="scope">
          {{ scope.row.role?.desc }}
        </template>
      </el-table-column>
      <el-table-column>
        <template #header>操作
        </template>
        <template #default="scope">


          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
                         title="确定删除该条记录吗？" @confirm="handleDelete(scope.$index, scope.row)">
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog
        v-model="dialogVisible"
        title="修改用户角色"
        width="30%"
        :before-close="handleClose"
    >
      <el-radio-group v-model="radio">
        <el-radio v-for="item in rolelist" :label="item.id">{{ item.desc }}{{ item.id }}</el-radio>
      </el-radio-group>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmit"
        >Confirm</el-button
        >
      </span>
      </template>
    </el-dialog>
    <!--    <el-pagination
            :hide-on-single-page="false"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20, 25]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>-->
  </div>
</template>
<script lang="ts">
import {computed, defineComponent, onMounted, reactive, ref, toRefs, toRef} from 'vue'
import {useRouter} from 'vue-router'
import permission from '@/directive/permission'
import request from "@/utils/request";

export default defineComponent({
  name: 'TableList',
  directives: {
    permission
  },
  setup() {
    // 思考 ref 响应式和 reactive 响应式的区别； 修改对象属性值，是否会刷新数据
    let dqid = null
    const radio = ref(null)
    const dialogVisible = ref(false)
    const router = useRouter()
    const filterTableRef = ref()
    const state = reactive({
      rolelist: [],
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      search: ''
    })
    const formInline = reactive({
      user: '',
      region: ''
    })
    const total = computed(() => state.tableData.length)

    const getdata = async () => {
      state.tableData = []
      // eslint-disable-next-line no-console
      const data = await request({
        url: 'api/adminuser',
        method: 'get',
        json: true,
      })
      state.tableData.push(...data.data)
    }
    onMounted(async () => {
      getdata()

      const data1 = await request({
        url: 'api/role',
        method: 'get',
        json: true,
      })
      state.rolelist.push(...data1.data)
    })


    // methods
    const resetDateFilter = () => {
      filterTableRef.value.clearFilter('date')
    }

    const clearFilter = () => {
      filterTableRef.value.clearFilter()
    }

    const formatter = (row: { address: any }) => row.address
    const filterTag = (value: any, row: { tag: any }) => row.tag === value
    const filterHandler = (value: any, row: { [x: string]: any }, column: { property: any }) => {
      const {property} = column
      return row[property] === value
    }
    const handleEdit = (index: any, row: any) => {
      console.log(row.role?.id ?? null)
      dqid = row.id
      radio.value = row.role?.id ?? null
      console.log(radio.value
      )
      // eslint-disable-next-line no-console
      dialogVisible.value = true
    }
    const handleDelete = async (index: any, row: any) => {
      const data1 = await request({
        url: `api/adminuser/${row.id}`,
        method: 'delete',
        json: true,
      })
      console.log(data1)
      getdata()
    }
    const handleSizeChange = (val: any) => {
      // eslint-disable-next-line no-console
      console.log(`每页 ${val} 条`)
      state.pageSize = val
      // request api to change tableData
    }
    const handleCurrentChange = (val: any) => {
      // eslint-disable-next-line no-console
      console.log(`当前页: ${val}`)
      state.currentPage = val
      // request api to change tableData
    }
    const onSubmit = async () => {
//
      const data1 = await request({
        url: `api/adminuser/${dqid}`,
        method: 'patch',
        data: {
          radio: radio.value
        },
        json: true,
      })
      console.log(data1)//
      getdata()
      dialogVisible.value = false
    }
    return {
      radio,
      dialogVisible,
      formInline,
      total,
      ...toRefs(state),
      handleCurrentChange,
      handleSizeChange,
      onSubmit,
      handleEdit,
      handleDelete,
      filterTableRef,
      resetDateFilter,
      clearFilter,
      formatter,
      filterTag,
      filterHandler
    }
  }
})
</script>
<style lang="stylus" scoped>
.table-container {
  .form-inline {
    margin: 15px;
    text-align: left;
  }

  .table-list {
    margin: 15px;
  }

}
</style>
